<template>
	<div>
		<el-dialog title="快餐订单列表" :visible.sync="fastfoodVisible" :close-on-click-modal="false" width="95%" center>
			<div class="mod-config">
				<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
					<el-form-item><el-input v-model="dataForm.key" placeholder="单号" clearable></el-input></el-form-item>
					<el-form-item><el-button @click="getDataList()">查询</el-button></el-form-item>
					<el-form-item><el-button type="success" @click="getDataListPay(2)">已结账</el-button></el-form-item>
					<el-form-item><el-button type="danger" @click="getDataListPay(1)">未结账</el-button></el-form-item>
				</el-form>
				<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
					<el-table-column prop="brandName" header-align="center" align="center" label="牌号">
					</el-table-column>
					<el-table-column prop="fastfoodId" header-align="center" align="center" label="单号"></el-table-column>
					<el-table-column prop="totalMoney" header-align="center" align="center" label="总价">
						<template slot-scope="scope">
							<div style="color: red;font-weight: 500;">￥{{ scope.row.totalMoney }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="reallyGet" header-align="center" align="center" label="实收">
						<template slot-scope="scope">
							<div type="danger" v-if="scope.row.reallyGet === null">----</div>
							<div style="color: red;font-weight: 500;" v-if="scope.row.reallyGet !== null">
								￥{{ scope.row.reallyGet }}
								<span v-show="scope.row.memberId !== null">【会员】</span>
								<span v-show="scope.row.accountId !== null">【记账】</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column width="70px" prop="number" header-align="center" align="center" label="份数"></el-table-column>
					a
					<el-table-column prop="time" header-align="center" align="center" label="时间"></el-table-column>
					<el-table-column prop="discount" header-align="center" align="center" label="折扣">
						<template slot-scope="scope">
							<div type="danger" v-if="scope.row.discount === null">----</div>
							<el-tag type="success" v-if="scope.row.discount !== null">{{ scope.row.discount }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="status" header-align="center" align="center" label="状态" width="80px">
						<template slot-scope="scope">
							<el-tag type="danger" v-if="scope.row.status === 1">未结账</el-tag>
							<el-tag type="success" v-if="scope.row.status === 2">已结账</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="foodVo" header-align="center" align="center" label="菜品集合" width="300">
						<template slot-scope="scope">
							<div v-for="item in JSON.parse(scope.row.foodVo)">
								{{ item.foodName }}/{{ item.foodNum }}份
								<font style="color: red;">￥{{ item.total }}元</font>
							</div>
						</template>
					</el-table-column>
					<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
						<template slot-scope="scope">
							<el-tag v-show="scope.row.status === 2">已结账</el-tag>
							<el-button v-show="scope.row.status === 1" type="success" size="small" @click="jiezhang(scope.row)">结账</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					@size-change="sizeChangeHandle"
					@current-change="currentChangeHandle"
					:current-page="pageIndex"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					:total="totalPage"
					layout="total, sizes, prev, pager, next, jumper"
				></el-pagination>
			</div>
		</el-dialog>

		<PayComponent @refreshDataList="getDataList()" v-if="PayComponentVisible" ref="PayComponentRef"></PayComponent>
	</div>
</template>

<script>
import PayComponent from './Pay.vue';
export default {
	components: {
		PayComponent
	},

	data() {
		return {
			dataForm: {
				key: ''
			},
			dataList: [],
			pageIndex: 1,
			pageSize: 10,
			totalPage: 0,
			dataListLoading: false,
			dataListSelections: [],
			addOrUpdateVisible: false,
			fastfoodVisible: false,
			PayComponentVisible: false
		};
	},
	activated() {
		this.getDataList();
	},
	methods: {
		//结账
		jiezhang(row) {
			this.PayComponentVisible = true;
			row.sign = 1; //格式化foodVo
			row.paySign = 2; //直接结账
			row.directPayFlag = false;
			this.$nextTick(() => {
				this.$refs.PayComponentRef.init(row);
			});
		},

		//已结账列表
		getDataListPay(status) {
			this.$http({
				url: this.$http.adornUrl('/reception/tstorefastfoodrecord/listFastFood'),
				method: 'get',
				params: this.$http.adornParams({
					current: this.pageIndex,
					size: this.pageSize,
					status: status,
					key: ''
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataList = data.data.records;
					this.totalPage = data.data.total;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
				this.dataListLoading = false;
			});
		},

		// 获取数据列表
		getDataList() {
			this.fastfoodVisible = true;
			this.dataListLoading = true;
			this.$http({
				url: this.$http.adornUrl('/reception/tstorefastfoodrecord/listFastFood'),
				method: 'get',
				params: this.$http.adornParams({
					current: this.pageIndex,
					size: this.pageSize,
					key: this.dataForm.key,
					status: '' //所有
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataList = data.data.records;
					this.totalPage = data.data.total;

					this.dataForm.key = '';
					this.$emit("refreshBrand")
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
				this.dataListLoading = false;
			});
		},
		// 每页数
		sizeChangeHandle(val) {
			this.pageSize = val;
			this.pageIndex = 1;
			this.getDataList();
		},
		// 当前页
		currentChangeHandle(val) {
			this.pageIndex = val;
			this.getDataList();
		},
		// 多选
		selectionChangeHandle(val) {
			this.dataListSelections = val;
		},
		// 新增 / 修改
		addOrUpdateHandle(id) {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(id);
			});
		},
		// 删除
		deleteHandle(id) {
			var ids = id
				? [id]
				: this.dataListSelections.map(item => {
						return item.takeoutId;
				  });
			this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					url: this.$http.adornUrl('/reception/tstorefastfoodrecord/delete'),
					method: 'post',
					data: this.$http.adornData(ids, false)
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.getDataList();
							}
						});
					} else {
						this.$message.error(data.msg);
					}
				});
			});
		}
	}
};
</script>
